<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="visible"
    :show-close="false"
    class="jsbos-dialog jsbos-dialog_center export-dialog"
    lock-scroll
    width="600px"
  >
    <template slot="title">
      <div class="dialog-title">
        <span class="slot-title-item">导出数据</span>
        <el-button
          type="text"
          icon="el-icon-close"
          class="slot-title-item"
          @click="close()"
        ></el-button>
      </div>
    </template>

    <el-form
      label-position="top"
      label-width="80px"
      v-loading="exportLoadloading"
      element-loading-text=" 正在导出......"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.85)"
    >
      <el-form-item label="数据选择">
        <el-radio-group v-model="type">
          <el-radio :label="0">当前页面数据</el-radio>
          <el-radio :label="1">全部页面数据</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="导出字段">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <el-checkbox-group v-model="columns" @change="handleCheckedChange">
          <el-checkbox
            style="width: 110px"
            v-for="item in columnList"
            :label="item.prop"
            :key="item.prop"
            >{{
              item.label.length > 6
                ? item.label.slice(0, 6) + "..."
                : item.label
            }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false" :loading="exportLoadloading"
        >取 消</el-button
      >
      <el-button type="primary" @click="downLoad" :loading="exportLoadloading"
        >导 出</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    // 导出接口 例如 /api/export/exportData
    exportApi: {
      type: String,
      default: "",
    },
    exportMethod: {
      type: String,
      default: "POST",
    },
  },
  data() {
    return {
      visible: false,
      btnLoading: false,
      type: 0,
      columns: [],
      checkAll: true,
      isIndeterminate: false,
      columnList: [],
      exportLoadloading: false,
    };
  },
  methods: {
    openLoading() {
      this.exportLoadloading = true;
    },
    closeLoading() {
      this.exportLoadloading = false;
    },
    close() {
      if (this.exportLoadloading) {
        this.$message({
          message: "正在导出中，请稍后关闭...",
          type: "warning",
          duration: 1500,
          offset: 380,
          center: true,
        });
      } else {
        this.visible = false;
      }
    },
    init(columnList) {
      this.visible = true;
      this.checkAll = true;
      this.isIndeterminate = false;
      this.columnList = columnList;
      this.columns = columnList.map((o) => o.prop);
    },
    handleCheckAllChange(val) {
      this.columns = val ? this.columnList.map((o) => o.prop) : [];
      this.isIndeterminate = false;
    },
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.columnList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.columnList.length;
    },
    downLoad() {
      this.$emit(
        "download",
        {
          dataType: this.type,
          selectKey: this.columns.join(","),
        },
        this.exportApi,
        this.exportMethod
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.export-dialog >>> .el-dialog__body {
  padding: 0px 20px !important;
  >>> .el-loading-spinner {
    display: flex;
  }
}

.export-dialog >>> .el-loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
}
.export-dialog >>> .el-loading-spinner > i {
  font-size: 20px;
}
.export-dialog >>> .el-loading-spinner > p {
  margin-left: 10px;
  font-size: 16px;
}
.dialog-title {
  display: flex;
  justify-content: space-between;
}
.dialog-title .slot-title-item {
  font-size: 16px;
  color: #000;
}
</style>
